<template>
    <div class="container">
      <div class="title">
        {{this.title}}
      </div>
      <div class="mainer">
        <div class="tags"><a href="Javascript:;" @click="getbytag()">全部</a></div>
        <div class="tags" v-for="item in tags">
          <a href="Javascript:;" @click="getbytag(item)">{{item}}</a>
        </div>
      </div>
    </div>
</template>

<script>

    export default {
        name: 'TagSelector',
      props:['title'],
        data() {
            return {
              tags:[]
            }
        },
        methods: {
          getbytag(item){
            this.$emit('tag',item)
          }
        },
        created() {

        },
        mounted() {
          this.$http.get('/api/14ch/gettags').then((res)=>{
            this.tags=res.data.tags;
          })
        }
    }
</script>

<style scoped>
.container{
  background-color: #fff;
  color: #000000;
  z-index:100;
  position:absolute;
  top:60px;
  left:calc(50% + 270px);
  height:180px;
  /*transform: translate(-50%,0);*/
  border-radius: 5px;
  width:350px;
  text-align: left;
  line-height: 25px;
  cursor:default;
}
a{
  color:#76b0fb;
}
.mainer{
  margin:10px;
}
.tags{
  margin:5px;
  display: inline-flex;
}
.title{
  padding-top: 12px;
  padding-left: 35px;
  padding-bottom: 2px;
  font-size: 16px;
  letter-spacing: 0;
  color:#222;
}
  @media (max-width:768px) {
    .container{
      display: none;
    }
  }
</style>
